<template>
  <div class="main-content">
    <div style="background-color: rgba(180,180,238,0.07);">
      <!--      1 文字部分-->
      <div style="margin-bottom: 60px">
        <div style="text-align: center;margin:0 auto;position: relative;">
          <img src="@/assets/feedbackbanner.jpg" alt="" style="width: 100%;height: 500px">
        </div>
      </div>
    </div>
    <div class="detail-container">
      <div class="detail-title">留言反馈</div>
      <div class="detail-comment">
        <div style="margin-bottom: 50px">
          <el-input type="textarea" placeholder="请输入内容" v-model="content" rows="4"></el-input>
          <div style="margin-top: 10px; text-align: right">
            <el-button type="primary" @click="submit(0, content)">提 交</el-button>
          </div>
        </div>
        <div>
          <el-row v-for="item in messages" style="margin-bottom: 10px">
            <el-col :span="3" style="display: flex; align-items: center;">
              <img :src="item.avatar" style="width: 50px; height: 50px; border-radius: 50%;">
              <div style="margin-left: 10px; flex: 1" class="overflowShow">{{item.userName}}</div>
            </el-col>
            <el-col :span="21">
              <el-row>
                <el-col :span="19" style="height: 50px; line-height: 50px">{{item.content}}</el-col>
                <el-col :span="5" style="height: 50px; line-height: 50px; text-align: right">{{item.time}}</el-col>
              </el-row>
              <el-row :span="3" style="margin-top: 20px" v-for="child in item.children">
                <el-col :span="4" style="display: flex; align-items: center;">
                  <img :src="child.avatar" style="width: 50px; height: 50px; border-radius: 50%;">
                  <div style="margin-left: 10px; flex: 1" class="overflowShow">{{child.userName}} 回复：</div>
                </el-col>
                <el-col :span="15" style="height: 50px; line-height: 50px">{{child.content}}</el-col>
                <el-col :span="5" style="height: 50px; line-height: 50px; text-align: right">{{child.time}}</el-col>
              </el-row>

              <el-row :span="3" style="margin-top: 20px">
                <el-col :span="15">
                  <el-input v-model="item.reply"></el-input>
                </el-col>
                <el-col :span="4" style="margin-left: 10px">
                  <el-button type="primary" @click="submit(item.id, item.reply)">回复</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!--      网站介绍-->
    <div style="text-align: center;margin:50px auto" >
      <div style="color: #999797; font-size: 14px;margin-bottom: 20px">欢迎来到我们校园官网，这里提供快捷的请假或活动申请功能，同时你还可以在本网站浏览校园新闻。 </div>
      <div style="color: #999797; font-size: 14px;margin-bottom: 20px">在这里，您可以轻松地浏览各种校园动态，在线快捷参与校园活动。</div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {

  data() {
    return {
      user: JSON.parse(localStorage.getItem('user') || {}),
      recordData: [],
      search:{},
      pageNum:1,
      total:0,
      content: '',
      reply: '',
      messages:{}

    }
  },
  // 监听路由
  watch: {
    $route(to, from) {
      if(to.path === '/front/index') {
        location.reload()
      }
    }
  },
  mounted() {
    this.loadMessage()
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    loadMessage() {
      request.get("/message").then(res => {
        if (res.code === '0') {
          this.messages = res.data
        } else {
          this.$notify.error(res.msg)
        }
      })
    },
    submit(parentId, content) {
      if (!content) {
        this.$notify.warning("请输入内容")
        return
      }
      let data = {content: content, userId: this.user.id, role: this.user.role, parentId: parentId}
      request.post("/message", data).then(res => {
        if (res.code ==='0') {
          this.$notify.success("留言成功")
          this.loadMessage()
          this.content = ""
        } else {
          this.$notify.error(res.msg)
        }
      })
    }

  }
}
</script>
